<%-- 
    Document   : indexPage
    Created on : 21.6.2013, 10.32.20
    Author     : vasilenko
--%>

<%@page contentType="text/html" pageEncoding="windows-1251"%>
<%@taglib  uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
        <script type="text/javascript" src="<c:url value="/resources/js/jquery-2.0.2.js"/>"></script>
        <script type="text/javascript" src="<c:url value="/resources/js/jquery-ui.js"/>"></script>
        <script type="text/javascript" src="<c:url value="/resources/js/jquery.json-2.4.js"/>"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                
                function formModel(){
                    this.study ="";
                    this.categories =[];
                    this.items = [];
                };
                
                var formToSend = new formModel();
                
                $('#addCategory').click(addNewElement);
                $('#addItem').click(addNewItemElement);
                $('#proccessForm').click(proccessForm);
                
                function proccessForm(){
                 $('#studyForm :input').each(function(){
                    if($(this).attr("name") === "studyField"){
                        formToSend.study = $(this).val();    
                    }
                    if($(this).attr("name") === "categoryFiled"){
                        if($(this).val())
                            formToSend.categories.push($(this).val());    
                    }
                    if($(this).attr("name") === "itemField"){
                        if($(this).val())
                            formToSend.items.push($(this).val());    
                    }
                 }); 
                 var json = $.toJSON(formToSend);
                 alert(json);
                 sendFromAjax(json);
                }
                
                function sendFromAjax(data){
                    $.ajax({
                        dataType: 'json',
                        type: 'post',
                        url: '<c:url value="/index/addStudy" />',
                        data: data,
                        contentType: "application/json; charset=utf-8",
                        traditional: true,
                        success: function(){alert('send');},
                        error: function(){alert('error');},
                    });
                }
                
                function addNewElement(){
                  var parrent = $(this).parent();
                  if(!parrent.find('#categoryFiled').val())
                      return;
                  var clone = parrent.clone();
                  $(parrent).find('#addCategory').remove();
                  $(parrent).find('#delCategory').show().click(deleteElement);
                  $(clone).find('#addCategory').click(addNewElement);
                  $(clone).find('#categoryFiled').val("");
                  $(clone).insertAfter(parrent);
                }
                function addNewItemElement(){
                  var parrent = $(this).parent();
                  if(!parrent.find('#itemField').val())
                      return;
                  var clone = parrent.clone();
                  $(parrent).find('#addItem').remove();
                  $(parrent).find('#delItem').show().click(deleteElement);
                  $(clone).find('#addItem').click(addNewItemElement);
                  $(clone).find('#itemField').val("");
                  $(clone).insertAfter(parrent);
                }
                function deleteElement(){
                  var parrent = $(this).parent();
                  parrent.remove();
                }
                
                
            });
            
        </script>
        
        <style type="text/css">
            form{
                width: 500px;
            }
            
            #divHeader{
                margin: 20px 0px 0px 0px;
                padding-left: 30px;
                font-size: 18pt;
                font-weight: bold;
                padding-left: 30px;
                border-bottom: 1px solid black;
                width: 500px;
            }
            
            .divForm{
                width: 400px;
                padding-left: 80px;
                margin: 30px 0px 20px 0px;
            }

            .divForm input{
                width: 270px; 
                margin-left: 50px;
            }
            
            .label{
                display: block;
                width: 100px;
                font-size: 12pt;
                font-weight: bold;
                margin-bottom: 10px;
            }
            
            .items{
                margin-bottom: 10px;
            }
            .addItem{
                float:right;
                width: 26px;
                height: 26px;
                cursor: pointer;       
            }
            .delItem{
                float:right;
                width: px;
                height: 34px;
                cursor: pointer; 
                display: none;
            }
        </style>
        <title>Add websort</title>
    </head>
    <body>
        <div id="divHeader">Add websort ${userDTO.name}!</div>
        <form name="study" id="studyForm">
            <div class="divForm">
                <div class="label">Study:</div>
                <input type="text" name="studyField" id="studyField">
            </div>
            <div class="divForm" id="divCategory">
                <div class="label">Category:</div>
                <div class="items">
                    <input type="text" name="categoryFiled" id="categoryFiled">
                    <img id="addCategory" src="<c:url value="/resources/images/addIcon.jpg"/>" alt="add" class="addItem"/>
                    <img id="delCategory" src="<c:url value="/resources/images/minusIcon.jpg"/>" alt="delete" class="delItem"/>
                </div>    
            </div>
            <div class="divForm" id="divItem">
                <div class="label">Items:</div>
                <div class="items">
                    <input type="text" name="itemField" id="itemField">
                    <img id="addItem" src="<c:url value="/resources/images/addIcon.jpg"/>" alt="add" class="addItem"/>
                    <img id="delItem" src="<c:url value="/resources/images/minusIcon.jpg"/>" alt="delete" class="delItem"/>
                </div>    
            </div>
                <div style="text-align: center">
                    <input id="proccessForm" type="button" value="add study"/>
                </div>
        </form>
    </body>
</html>
